<template>
	<view class="main">
		<image src="../../static/login/bg.png" mode="aspectFill" class="bg"></image>
		<view class="form">
			<image src="../../static/logo.png" mode="widthFix" class="logo"></image>
			<form class="form-box">
				<view class="uni-form-item">
					<image src="../../static/login/username.png" mode="" class="icon"></image>
					<up-input placeholder-style="color: #ddd;" fontSize="17px" color="#fff" name="username"
						class="uni-input" border="none" :clearable="true" v-model="username" placeholder="请输入姓名" />
				</view>
				<view class="uni-form-item">
					<image src="../../static/login/password.png" mode="" class="icon"></image>
					<up-input placeholder-style="color: #ddd;" fontSize="17px" color="#fff" name="password"
						id="uni-input-password" border="none" :clearable="true" class="uni-input" placeholder="请输入密码"
						:suffixIconStyle="{ color: '#ddd' }" :password="true" v-model="password" />
				</view>
				<button hover-class="btn-hover" :plain="true" class="btn btn-submit" @click="loginClick">登录</button>
			</form>
		</view>
	</view>
</template>

<script setup>
import {
	reactive,
	ref
} from "vue"
import { onLoad } from '@dcloudio/uni-app'
import { useRouter } from '@/uni-simple-router';
import { login } from '@/util/login';
const router = useRouter();
let username = ref("");
let password = ref("");
uni.setNavigationBarTitle({
	title: "登录"
});
let loginClick = async () => {
	if (username.value == "" || password.value == "") {
		uni.showToast({
			title: "请输入正确的账号密码",
			icon: "none",
			duration: 3000
		})
		return false;
	}
	
	let info = await login({ username: username.value, password: password.value },'button');
	console.log('info',info);
	
	if (info) {
		router.replaceAll({ path: "/" }); // 要打开的页面
	}
}
</script>

<style lang="scss">
.main {
	flex-direction: row;
	background-color: #0fa0e9;
	height: 100vh;
	overflow: hidden;

	.bg {
		width: 100%;
		height: 100%;
		// margin-top: 250px;
	}

	.form {
		position: absolute;
		top: 150px;
		left: 0;
		z-index: 1;
		align-items: center;
		flex-direction: column;
		width: 100%;
		padding: 30px;
		box-sizing: border-box;

		.logo {
			width: 90%;
			margin: 0 auto 70px;
			display: block;
		}


		.form-box {
			margin-top: 30px;

			.uni-form-item {
				width: 100%;
				margin-bottom: 25px;
				display: flex;
				align-items: center;
				flex-direction: row;

				.icon {
					width: 25px;
					height: 25px;
					margin-right: 25px;
				}
			}
		}

		.btn-submit {
			width: 100%;
			color: #fff;
			border-color: #fff;
			border-radius: 25px;
		}

		.checkbox {
			margin-top: 15px;

			.checkbox-text {
				color: #fff;
				font-size: 16px;
			}
		}


		.btn-hover {
			background: rgba(0, 0, 0, .2);
		}
	}
}

.uni-input {
	color: #fff;
	flex: 1;
}
</style>